<script setup lang="tsx">
import { ref } from 'vue';
import { useBoolean } from '@sa/hooks';
import RoleTree from './modules/role-tree.vue';
import RoleMenu from './modules/role-menu.vue';

defineOptions({
  name: 'RolePage'
});

const { bool: userItemVisible } = useBoolean();

const roleData = ref<Api.SystemManage.Role>();
const roleId = ref<number>(0);

/** org units handle select */
const handleSelect = (visible: boolean, item: Api.SystemManage.Role) => {
  userItemVisible.value = visible;
  roleData.value = item;
  roleId.value = item.id;
};
</script>

<template>
  <div class="flex overflow-hidden">
    <NGrid
      :x-gap="8"
      :y-gap="8"
      item-responsive
      responsive="screen"
      cols="1 s:1 m:5 l:5 xl:5 2xl:5"
      class="h-full-hidden"
    >
      <NGridItem span="1" class="h-full"><RoleTree class="h-full-hidden" @select="handleSelect" /></NGridItem>
      <NGridItem span="4">
        <NCard class="h-full">
          <NTabs type="line" size="medium" default-value="menu">
            <NTabPane name="menu" tab="功能权限" display-directive="show">
              <RoleMenu :key="roleId" :role-id="roleId" />
            </NTabPane>
            <NTabPane name="api" tab="接口权限" display-directive="show"></NTabPane>
            <NTabPane name="user" tab="角色用户" display-directive="show"></NTabPane>
          </NTabs>
        </NCard>
        <!--
 <NCard :bordered="false" size="small" class="h-full">
          <NEmpty description="请选择组织查看列表" class="h-full justify-center" />
        </NCard>
-->
      </NGridItem>
    </NGrid>
  </div>
</template>

<style scoped></style>
